<template>
    <div :style="'background-image:url(' + backImage +');'" class="login">
        <el-form :model="loginForm" :rules="loginRules" class="login-form" label-position="left" label-width="0px"
                 ref="loginForm">
            <h3 class="title">
                {{loginTitle}}
            </h3>
            <el-form-item prop="username">
                <el-input auto-complete="off" placeholder="账号" type="text" v-model="loginForm.userName">
                    <svg-icon class="el-input__icon input-icon" icon-class="user" slot="prefix"/>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input @keyup.enter.native="handleLogin" auto-complete="off" placeholder="密码" type="password"
                          v-model="loginForm.password">
                    <svg-icon class="el-input__icon input-icon" icon-class="password" slot="prefix"/>
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input @keyup.enter.native="handleLogin" auto-complete="off" placeholder="验证码" style="width: 63%"
                          v-model="loginForm.code">
                    <svg-icon class="el-input__icon input-icon" icon-class="validCode" slot="prefix"/>
                </el-input>
                <div class="login-code">
                    <img :src="validateImg" @click="refreshValidate">
                </div>
            </el-form-item>
            <el-checkbox style="margin:0 0 25px 0;" v-model="loginForm.rememberMe">
                记住我
            </el-checkbox>
            <el-checkbox :label="bkLabel" @change="operDynamicBackground"></el-checkbox>
            <el-form-item style="width:100%;">
                <el-button :loading="loading" @click.native.prevent="handleLogin" size="medium" style="width:100%;"
                           type="primary">
                    <span v-if="!loading">登 录</span>
                    <span v-else>登 录 中...</span>
                </el-button>

            </el-form-item>
        </el-form>
        <!--  底部  -->
        <div id="el-login-footer">
            <span/>
            <span> ⋅</span>
        </div>
    </div>
</template>

<script>
    import background from "@/assets/2.jpg"
    import Setting from "@/settings";
    import {getValidateImg} from "../api/star_horse";
    import {ElMessage} from "element-plus";

    export default {
        name: "Login",
        setup() {
            const backImage = background;
            return (
                backImage
            )
        },
        data() {
            return {
                loginTitle: Setting.title,
                backImage: background,
                validateImg: "",
                uuid: "",
                bkLabel: "开启动态背景",
                index: 1,
                redirect: undefined,
                loginForm: {},
                loginRules: {
                    userName: [{required: true, trigger: 'blur', message: '用户名不能为空'}],
                    password: [{required: true, trigger: 'blur', message: '密码不能为空'}],
                    code: [{required: true, trigger: 'change', message: '验证码不能为空'}]
                }
            }
        },
        methods: {
            /**
             * 处理登录信息
             */
            handleLogin() {
                let that = this;
                that.$refs.loginForm.validate(valid => {
                    const user = {
                        userName: this.loginForm.userName,
                        password: this.loginForm.password,
                        rememberMe: this.loginForm.rememberMe,
                        code: this.loginForm.code,
                        uuid: this.loginForm.uuid
                    }
                    // user.password = encrypt(user.password)
                    if (valid) {
                        that.$store.dispatch("loginAction", user).then(() => {
                            that.$router.push({path: this.redirect || "/"})
                        }).catch(error => {
                            ElMessage.error(error)
                        });
                    }
                });

            },
            operDynamicBackground() {
                let that = this;
                if (!that.interval) {
                    that.bkLabel = "关闭动态背景";
                    that.dynamicBackground();
                } else {
                    clearInterval(that.interval);
                    that.interval = undefined;
                    that.bkLabel = "开启动态背景";
                }
            },
            refreshValidate() {
                let that = this;
                that.validateImg ="/public/images.php?action=captcha&rand="+Math.random();

            },
            dynamicBackground() {
                let that = this;
                that.interval = setInterval(function () {
                    if (that.index > 2) {
                        that.index = 1;
                    }
                    that.backImage = require(`@/assets/${that.index}.jpg`)
                    that.index++;
                }, 5000)
            }
        },
        watch: {
            $route: {
                handler: function (route) {
                    this.redirect = route.query && route.query.redirect
                },
                immediate: true
            }
        },
        created() {
            let that = this;
            that.refreshValidate();

        }

    }
</script>
<style scoped>
    ::v-deep #app {
        height: 100%;
    }

    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-size: cover;
    }

    .title {
        margin: 0 auto 30px auto;
        text-align: center;
        color: #707070;
    }

    .login-form {
        border-radius: 6px;
        background: #ffffff;
        width: 385px;
        padding: 25px 25px 5px 25px;
    }

    .login-form .el-input {
        height: 38px;
    }

    .login-form.el-input input {
        height: 38px;
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;

    }

    .login-tip {
        font-size: 13px;
        text-align: center;
        color: #bfbfbf;
    }

    .login-code {
        width: 33%;
        display: inline-block;
        height: 38px;
        float: right;
    }

    .login-code img {
        cursor: pointer;
        vertical-align: middle
    }
</style>